<template>
  <div>
    <h1>声明周期演示</h1>
    <h2>TITLE:{{title}}</h2>
    <button @click="updateTitle">UpdateTitle</button>
    <div style="margin-top: 50px;">
      <router-link :to="{path:'/'}">返回 Index</router-link>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
export default {
  data () {
    return {
      title: '这是标题'
    }
  },
  methods: {
    updateTitle () {
      this.title = '这是新标题'
    }
  },
  beforeCreate () {
    console.group('beforeCreate 创建前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  },
  created () {
    console.group('created 创建完毕状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  },
  beforeMount () {
    console.group('beforeMount 挂载前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + (this.$el))
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  },
  mounted () {
    this.msg = '--- MSG ---'
    console.group('mounted 挂载结束状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  },
  beforeUpdate () {
    console.group('beforeUpdate 更新前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  },
  updated () {
    console.group('updated 更新完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  },
  beforeDestroy () {
    console.group('beforeDestroy 销毁前状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  },
  destroyed () {
    console.group('destroyed 销毁完成状态===============》')
    console.log('%c%s', 'color:red', 'el     : ' + this.$el)
    console.log(this.$el)
    console.log('%c%s', 'color:red', 'data   : ' + this.$data)
    console.log('%c%s', 'color:red', 'title: ' + this.title)
    console.groupEnd()
  }
}
</script>
